
<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8" />
<title>蜡笔同步 - 联系人</title>

<link rel="stylesheet" type="text/css" href="/css/reset.css" />
<link rel="stylesheet" type="text/css" href="/css/common.css" />

<script src="/js/util/jquery.min.js?v=1.3.1.10" type="text/javascript"></script>
<script type="text/javascript">
(function($){
$(function(){
	var cjson = ${json};
	
	function getJson(id){
		for(var i=0 ; i<cjson.length; i++){
			if(cjson[i].id==id){
				return cjson[i];
			}
		}
	}
	
	
	
	
	function createContainer(contact){
		var str ='<div id="contact-container-' + contact.id + '" class="contact-container inline-block">' + 
			'		<div class="contact-container-padding">' + 
			'<div class="contact-container-chk"><input type="checkbox" style="visibility: hidden;" value="' + contact.id + '"></div>' + 
			'			<div class="contact-container-info" data=' + contact.id + '>' + 
			'				<div class="contact-container-info-padding">' + 
			'					<div class="contact-container-info-height">' + 
			'						<div class="contact-info-ava"><img width="35" height="35" src="/image/default_ava.gif"></div>' + 
			'						<div class="contact-info-profile">' + 
			'							<div class="contact-info-name"><span title="' + contact.fullName+ '">' + contact.fullName + '</span></div>' + 
			'						</div>' + 
			'					</div>' + 
			'				</div>' + 
			'			</div>' + 
			'		</div>' + 
			'	</div>';
			
		return str;
	}
	function init(){
		if(cjson){
			var contactList = $("#contact-list");
			for(var i=0 ; i<cjson.length; i++){
				var doc = createContainer(cjson[i]);
				contactList.append(doc);
			}
		}
	}
	init();
	$("div[id^='contact-container-']").mouseover(function(){
		
		$(this).find(':input').css('visibility','');
	});
	$("div[id^='contact-container-']").mouseout(function(){
		
		$(this).find(':input').css('visibility','hidden');
	});
	$(".contact-container-info").click(function(){
		var id = $(this).attr("data");
		window.location.href="/edit?id=" + id;
	});
	
	$(".letter1").click(function(){
		var initial = $(this).attr("data");
		$("#contact-list").empty();
		for(var i=0 ; i<cjson.length; i++){
			if(cjson[i].initial == initial){
				var doc = createContainer(cjson[i]);
				$("#contact-list").append(doc);
			}
		}
	});
	
	function removeCnts(){
		
		var contactList = $("#contact-list");
		var ids = "";
		alert(2);
		contactList.find("input:checked").each(function(){
			alert($(this).val());
			ids+="id="+$(this).val()+"&"
		});
		alert(ids);
		$.ajax({
			type: 'POST',
			url:"/delete",
			data:ids,
			success:function(msg){
				alert(msg);
			}
		})
		$("#contact-list").find("div[id^='contact-container-']").each(function(){
			if($(this).find(":checkbox").attr('checked')){
			$(this).remove();
			}
		});
	}
	$(".delte-button").click(function(){
		removeCnts();
	});
	
		
});	
})(jQuery);
	<#if flg??>
	alert('保存成功');
	</#if>

</script>



<link rel="stylesheet" type="text/css" href="/css/contact.css" />
<link rel="stylesheet" type="text/css" href="/css/inner-contact.css"/></head>

<body>
<div id="content">
	<div id="main-container" class="main">
		<div class="common-container">
			<div id="l_na">
				<div class="round" id="l_nb">
					<div class="l_nba">
						<div class="contact-op"><a	href="contactimport">导入</a><a href="contactexport">导出</a>
						<a onclick="contact.print('');" href="javascript:void(0);">打印</a>
						</div>
						<a class="btn btn-2" id="l_nba" href="/contact/insert">
						<span>新建联系人</span>
						</a>
					</div>
					<ul id="letter">
					<#assign seq = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"]>
					<#assign init = map["initial"]> 
					<#list seq as key>
						<li  id="letter_${key}" data="${key}" <#if init[key]??> class="letter1" style="color: rgb(51, 51, 51); cursor: pointer;"</#if>>${key}</li>
					</#list>
						<li id="letter_aa">#</li>
					</ul>
				</div>
			</div>
			<div align="center" style="display:none" class="contact-search">
				<table cellspacing="0" cellpadding="0" width="252" height="32">
					<tbody>
					<tr>
						<td align="center" width="30">
						<div class="icon-search"></div>
						</td>
						<td><input type="text" id="l_nbc"
							tips="您可以通过姓名、电话号码、公司名称、备注等信息进行搜索" value="搜索联系人..."></td>
						<td align="center" width="30">
							<div style="display: none" id="search-close" class="icon-search-close-19"></div>
						</td>
					</tr>
					</tbody>
				</table>
			</div>
			<div id="forse">
				<div id="l_nc"><span title="全部联系人">全部联系人</span>(1)</div>
				<div id="op_cnt_top">
					<div class="l_ljm"><input type="checkbox" class="chk-select-all" value="all"><span>全选</span>
				</div>
				<div class="toolbar-btn-container">
					<a class="btn btn-4 delte-button" href="#" style="cursor: default; outline: medium none;">
					<span style="cursor: default;">删除</span>
					</a>
				</div>
				<div class="contact-pages"></div>
				<div class="sort" style="display:none">
					<div class="sort-fullPY-disabled" title="按字母排序"></div>
					<div onclick="setContactDefaultMethod('', 'timestamp');" onmouseout="this.className='sort-timestamp-enable-mouseout'" onmouseover="this.className='sort-timestamp-enable-mouseover'" class="sort-timestamp-enable-mouseout" title="按时间排序">
					</div>
				</div>
			</div>
			<div id="contact-list">

			</div>
			<div id="op_cnt_bottom">
				<div class="l_ljm"><input type="checkbox" class="chk-select-all" value="all"><span>全选</span>
				</div>
				<div class="toolbar-btn-container">
					<a class="btn btn-4 delte-button button-disabled-4" onclick="removeCnts();" href="javascript:;" style="cursor: default; outline: medium none;">
						<span style="cursor: default;">删除</span>
					</a>
				</div>
				<div class="contact-pages"></div>
				<div class="sort" style="display:none">
					<div class="sort-fullPY-disabled" title="按字母排序"></div>
					<div onclick="setContactDefaultMethod('', 'timestamp');" onmouseout="this.className='sort-timestamp-enable-mouseout'" onmouseover="this.className='sort-timestamp-enable-mouseover'" class="sort-timestamp-enable-mouseout" title="按时间排序"></div>
					
				</div>
			</div>
		</div>
	</div>
</div>
<div class="sub">
	<div class="nav-container" id="nav_container">
		<div class="nav">
			<div class="nav-border-top icon-nav-border-radius"></div>
			<div class="nav-border-radius-topleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-topright icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomright icon-nav-border-radius"></div>
			<div class="nav-item">
				<b class="icon-nav-contact icon16 nav-contact-"></b>
				<a href="javascript:;" id="nav_" class="active"><span>全部联系人(${list?size})</span></a>
			</div>
			<div class="nav-item nav-item-last">
				<b class="icon-nav-contact icon16 nav-contact--10"></b>
				<a href="javascript:;" id="nav_-10"><span>未分类(${list?size})</span></a>
			</div>
		</div>
		<div class="nav">
			<div class="nav-border-top icon-nav-border-radius"></div>
			<div class="nav-border-radius-topleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-topright icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomright icon-nav-border-radius"></div>
			<div class="nav-item nav-item-last">
				<b class="icon-nav-contact icon16 nav-contact-recycle"></b>
				<a href="javascript:void(0);" id="nav_recycle"><span>联系人回收站</span></a>
			</div>
		</div>
		<div class="nav">
			<div class="nav-border-top icon-nav-border-radius"></div>
			<div class="nav-border-radius-topleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-topright icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomleft icon-nav-border-radius"></div>
			<div class="nav-border-radius-bottomright icon-nav-border-radius"></div>
		<div class="nav-item nav-item-last">
			<b class="icon-nav-contact icon16 nav-contact-timemac"></b>
			<a href="javascript:void(0);" id="nav_timemac"><span>联系人时光机(Beta)</span></a>
		</div>
	</div>
</div>
</div>
</div>
</body>
</html>
